<template>
  <el-dialog :title="title" :visible.sync="open_editschooltimetable" width="500px" append-to-body
    :close-on-click-modal="false">

    <el-form :hide-required-asterisk="true" ref="form" :model="form" :rules="rules_scheduing" label-width="80px">
      <el-divider style="width: 80%;"></el-divider>


      <div class="ml20">

        <el-form-item label="上课日期" prop="studyDate">



          <el-date-picker v-model="form.studyDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>

        </el-form-item>

        <el-form-item label="开始时间" prop="classStart">
          <!-- <el-input v-model="form.classStart" placeholder="请输入上课时间开始" style="width: 360px;" /> -->
          <el-time-picker :value-format="pickerFormatText" :format="pickerFormatText" style="width: 360px;"
            v-model="form.classStart" :picker-options="{
                    selectableRange: '00:00:00 - 23:59:59', format: pickerFormatText
                  }" placeholder="开始时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="classFinish">
          <!-- <el-input v-model="form.classFinish" placeholder="请输入上课时间结束" style="width: 360px;" /> -->

          <el-time-picker :value-format="pickerFormatText" :format="pickerFormatText" style="width: 360px;"
            v-model="form.classFinish" :picker-options="{
                    selectableRange: '00:00:00 - 23:59:59', format: pickerFormatText
                  }" placeholder="结束时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="课时数" prop="classHours">

          <el-input-number v-model="form.classHours" :min="1" :max="10" label="描述文字" controls-position="right"></el-input-number>
        </el-form-item>



        <el-form-item label="授课教师" prop="classTeacher">


          <el-select style="width: 350px;" multiple v-model="classTeacher" placeholder="请选择授课教师" filterable>
            <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="考勤员" prop="classAttendant">

          <!-- <el-input style="width: 350px;" v-model="form.followUpPerson" placeholder="请输入跟进人"   filterable/> -->
          <el-select style="width: 350px;" v-model="form.classAttendant" placeholder="请输入考勤员" filterable>
            <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
            </el-option>

          </el-select>
        </el-form-item>





        <el-form-item label="上课教室" prop="classRoom">

          <el-select style="width: 350px;" v-model="form.classRoom" placeholder="请输入上课教室" filterable>
            <el-option v-for="dict in classroomList" :key="dict.userId" :label="dict.classroomName"
              :value="dict.classroomName">
            </el-option>

          </el-select>

        </el-form-item>
      </div>
    </el-form>
    <el-divider></el-divider>
    <div class="ml20 mr20">
      <el-button type="primary" @click="submitForm" style="width: 100%;">保存设置</el-button>
      <!-- <el-button @click="cancel">取 消</el-button> -->
    </div>
  </el-dialog>

</template>

<script>
  import {
    listScheduling,
    getScheduling,
    delScheduling,
    addScheduling,
    updateScheduling
  } from "@/api/scheduling/scheduling";
  import {
    listClassroom,
    getClassroom,
    delClassroom,
    addClassroom,
    updateClassroom
  } from "@/api/classroom/classroom";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";

  export default {
    name: "EditSchoolTimetable",
    dicts: ['class_circulate', 'week_day'],
    data() {
      return {
        pickerFormatText: 'HH:mm',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程表表格数据
        schedulingList: [],
        // 弹出层标题
        title: "编辑课节信息",
        // 是否显示弹出层
        open_editschooltimetable: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {
          classHours: 1
        },
        // 表单校验
        rules: {},
        userList: [],
        classroomList: [],
        queryParamsTeacher: {},
        queryclassroomParams: {},
        classTeacher:[],
        rules_scheduing: {
          classTeacher: [{
              required: true,
              message: '请选择授课教师',
              trigger: 'change'
            },

          ],
          }
      };
    },
    watch: {

      'classTeacher': {
        handler() {



          if (this.classTeacher.length == 0) {
            this.form.classTeacher = null;
          } else {
            this.form.classTeacher = this.classTeacher.join(",");
          }

        }
      },
    },


    created() {
      this.getTeacherList();
      this.getClassroomList();

    },
    methods: {

      /** 获取课程详情 */
      handleUpdate(id) {
        this.reset();

        getScheduling(id).then(response => {
          this.form = response.data;
          var teacherdata = response.data.classTeacher;
          this.classTeacher = teacherdata.split(",");
          console.log(   this.classTeacher );



        });
      },
      getTeacherList() {

        this.queryParamsTeacher.deptId = this.$store.state.user.deptId;

        listUser2(this.queryParamsTeacher).then(response => {
          this.userList = response.rows;
          console.log(this.userList);

        });
      },
      savechange() {

      },
      open_schooltimetableedit(id) {
        this.open_editschooltimetable = true;
        // console.log("传来的：" + id);

        this.handleUpdate(id);

      },
      /** 查询教室列表 */
      getClassroomList() {
        this.queryclassroomParams.deptId = this.$store.state.user.deptId;
        listClassroom(this.queryclassroomParams).then(response => {
          this.classroomList = response.rows;

        });
      },
      // 取消按钮
      cancel() {
        this.open_editschooltimetable = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },

      formatDate(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}-${month}-${day} `;
      },


      /** 提交按钮 */
      submitForm() {

          this.form.classTeacher = this.classTeacher.join(",");




        this.$refs["form"].validate(valid => {
          if (valid) {

            this.form.deptId = this.$store.state.user.deptId;
            updateScheduling(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open_editschooltimetable = false;

            });

          }
        });








      },



    }
  };
</script>
